<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动态输入效果</title>
    <style>
      .wrapper {
        height: 100vh;
        /*This part is important for centering*/
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .typing-demo {
        width: 22ch;
        animation: typing 2s steps(22), blink 0.5s step-end infinite alternate;
        white-space: nowrap;
        overflow: hidden;
        border-right: 3px solid;
        font-family: monospace;
        font-size: 2em;
      }

      @keyframes typing {
        from {
          width: 0;
        }
      }

      @keyframes blink {
        50% {
          border-color: transparent;
        }
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="typing-demo">This is a typing demo.</div>
    </div>
  </body>
</html>
